<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击我加载b模块</button>
    <script type="module">
        /* 
            一.导入和导出
                -导入:
                    -import "./路径.js"
                    -import {a,b} from "./路径.js"
                -导出:
                    -export {变量}
                    -export let a= 20; 导出多个

                导入导出  变量名称要对应

            二.默认导入和导出
                1.导入名称,可以自定义变量接收,不需要{};
         */           
                // import c from "./a.js";// b模块 a模块  {a: 10, b: 20, name: 'b模块对象'}
                //obj对应的是 export default 导出的内容; {c,d}是export里导出的内容
                // import obj,{c,d} from "./a.js"
                // let {a,b} = obj;//解构赋值
                // console.log(a,b);// 10 20
                // console.log(c,d);// 30 40

            //3.使用通配符 接收 所有的export 和 export default  里的内容 :  *
            // import * as obj from "./a.js";
            // console.log(obj.default.a); // 10

            //4.懒加载模块(按需加载)
            import "./a.js";//立即加载
            //import "./b.js"; //提供一个import 函数 按需加载模块
            import("./b.js").then(res=>console.log(res)); // Module {Symbol(Symbol.toStringTag): 'Module'}
    </script>
</body>

</html>